<template>
  <client-only>
    <mavon-editor
      v-model="content"
      ref="editor"
      :boxShadow="false"
      :autofocus="false"
      :style="{height: height,minHeight:height}"
      :ishljs="true"
      :toolbars="toolbars"
      toolbarsBackground="var(--bg)"
      editorBackground="var(--bg)"
      previewBackground="var(--bg)"
      @imgAdd="imgUpload"
      @change="change"
    />
  </client-only>
</template>

<script>
import api from "@/utils/api";

export default {
  name: "MarkdownEditor",
  props: {
    value: String,
    mini: {
      type: Boolean,
      default: () => false
    }
  },
  computed: {
    height() {
      return this.mini ? '150px' : '300px';
    },
    toolbars() {
      let options = {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        // mark: true, // 标记
        // superscript: true, // 上角标
        // subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: false, // 全屏编辑
        // readmodel: true, // 沉浸式阅读
        // htmlcode: true, // 展示html源码
        help: true, // 帮助
        // undo: true, // 上一步
        // redo: true, // 下一步
        // trash: true, // 清空
        // save: true, // 保存（触发events中的save事件）
        navigation: true, // 导航目录
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        subfield: true, // 单双栏模式
        preview: true, // 预览
      }
      if (this.mini) {
        options = {
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          code: true, // code
          table: true, // 表格
          help: true, // 帮助
          preview: true, // 预览
        }
      }
      return options;
    }
  },
  data() {
    return {
      content: this.value
    }
  },
  watch: {
    value(val) {
      this.content = val;
    }
  },
  methods: {
    change(val) {
      this.$emit('input', val);
    },
    imgUpload(pos, file) {
      let self = this;
      api.upload(file).then((data) => {
        self.$refs.editor.$img2Url(pos, data.url);
      })

    }
  }
}
</script>

<style lang="less">
.scroll-style {

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(123, 123, 123, 0.2);
    background: #7d7d7d;
  }

  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }
}

.v-note-help-wrapper .v-note-help-content .v-note-help-show {
  background: var(--bg) !important;
  color: var(--color);
}

.v-note-wrapper {
  background-color: var(--bg) !important;;
  border-color: var(--border-color) !important;

  .op-icon:hover, .selected {
    background: var(--color) !important;
  }

  .popup-dropdown {
    background: var(--bg) !important;
    border-color: var(--border-color) !important;
    color: var(--color) !important;

    &:hover {
      background-color: var(--bg-primary) !important;
      color: var(--color) !important;
    }
  }

  z-index: 2 !important;
}

.v-note-wrapper .v-note-panel .v-note-edit.divarea-wrapper.scroll-style::-webkit-scrollbar {
  background-color: initial !important;
}

.add-image-link-wrapper .add-image-link {
  color: var(--color) !important;
  background-color: var(--bg) !important;;
  border-color: var(--border-color) !important;

  input {
    background-color: var(--bg) !important;;
  }
}

.hljs {
  background-color: var(--bg-primary) !important;;
}

.markdown-body {
  * {
    border-color: var(--border-color) !important;
  }

  textarea {
    background-color: var(--bg) !important;;
  }

  hr {
    background-color: var(--bg-primary) !important;;
  }

  table {
    tr, td, th {
      background-color: var(--bg-primary) !important;
    }
  }
}

.markdown-body .highlight pre, .markdown-body pre, markdown-body table {
  background-color: var(--bg-primary) !important;;
  color: var(--color);
}

.v-note-help-wrapper .v-note-help-content {
  border-color: var(--border-color) !important;
}
</style>
